<template>
	<view class="container">
		<!-- 主内容区标题 -->
		<view class="title">
			<view style="flex:1">选择地区</view>
			<view style="border:1px solid #e2e2e2;padding:10rpx;background-color: #e2e2e2;border-radius: 20rpx;"
				@click="handleConfirm">
				<view style="font-weight: normal;">确定</view>
			</view>
		</view>

		<!-- 已选结果展示 -->
		<view class="selected-result">
			当前选择: {{ selectedProvince.name || '请选择省份' }} - {{ selectedCity.name || '请选择城市' }} -
			{{ selectedArea.name || '请选择区域' }}
		</view>

		<!-- 三级联动侧边栏区域 -->
		<view class="sidebar-container">
			<!-- 省份侧边栏：初始加载所有省份 -->
			<view class="sidebar">
				<scroll-view class="sidebar-scroll" scroll-y>
					<view class="sidebar-item" v-for="(province, index) in provinces" :key="province.id"
						:class="{ active: selectedProvince.id === province.id }" @click="handleProvinceClick(province)">
						{{ province.name }}
					</view>
				</scroll-view>
			</view>

			<!-- 城市侧边栏：初始为空，点击省份后加载 -->
			<view class="sidebar">
				<scroll-view class="sidebar-scroll" scroll-y>
					<view v-if="cities.length === 0 && !selectedProvince.id" class="empty-tip">请先选择省份</view>
					<view v-else-if="cities.length === 0 && selectedProvince.id" class="empty-tip">暂无城市数据</view>
					<view class="sidebar-item" v-else v-for="(city, index) in cities" :key="city.id"
						:class="{ active: selectedCity.id === city.id }" @click="handleCityClick(city)">
						{{ city.name }}
					</view>
				</scroll-view>
			</view>

			<!-- 区域侧边栏：初始为空，点击城市后加载 -->
			<view class="sidebar">
				<scroll-view class="sidebar-scroll" scroll-y>
					<view v-if="areas.length === 0 && !selectedCity.id" class="empty-tip">请先选择城市</view>
					<view v-else-if="areas.length === 0 && selectedCity.id" class="empty-tip">暂无区域数据</view>
					<view class="sidebar-item" v-else v-for="(area, index) in areas" :key="area.id"
						:class="{ active: selectedArea.id === area.id }" @click="handleAreaClick(area)">
						{{ area.name }}
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		areaData
	} from '@/common/area.js'

	// 响应式数据：仅初始加载省份，城市和区域初始为空
	const provinces = ref([])
	const cities = ref([])
	const areas = ref([])

	// 选中项
	const selectedProvince = ref({})
	const selectedCity = ref({})
	const selectedArea = ref({})

	// 初始化：仅加载省份数据，不加载城市和区域
	onMounted(() => {
		provinces.value = areaData.provinces || []
	})

	// 点击省份：仅此时加载对应城市数据，重置城市和区域
	const handleProvinceClick = (province) => {
		selectedProvince.value = province
		// 点击省份后，才从areaData获取对应城市（懒加载）
		cities.value = areaData.cities[province.id] || []
		// 重置下级选中状态和数据
		selectedCity.value = {}
		selectedArea.value = {}
		areas.value = [] // 清空区域，避免残留之前的区域数据
	}

	// 点击城市：仅此时加载对应区域数据，重置区域
	const handleCityClick = (city) => {
		selectedCity.value = city
		// 点击城市后，才从areaData获取对应区域（懒加载）
		areas.value = areaData.areas[city.id] || []
		// 重置区域选中状态
		selectedArea.value = {}
	}

	// 点击区域：仅更新选中状态，无数据加载
	const handleAreaClick = (area) => {
		selectedArea.value = area
		console.log('选择完成:', {
			province: selectedProvince.value,
			city: selectedCity.value,
			area: selectedArea.value
		})
	}

	// 确定按钮：校验选择完整性
	const handleConfirm = () => {
		if (!selectedProvince.value.id || !selectedCity.value.id || !selectedArea.value.id) {
			return uni.showToast({
				title: '请完成省市区选择',
				icon: 'none',
				duration: 1500
			})
		}
		const area = {
			province: selectedProvince.value,
			city: selectedCity.value,
			area: selectedArea.value,
			show: selectedProvince.value.name + '' + selectedCity.value.name + '' + selectedArea.value.name
		}
		uni.setStorageSync('storage_area', area);
		uni.navigateBack();
	}
</script>

<style scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.selected-result {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	/* 侧边栏容器 */
	.sidebar-container {
		display: flex;
		width: 100%;
		height: calc(100vh - 200rpx);
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;
	}

	/* 单个侧边栏样式 */
	.sidebar {
		flex: 1;
		border-right: 1px solid #eee;
		box-sizing: border-box;
	}

	/* 最后一个侧边栏去掉右边框 */
	.sidebar:last-child {
		border-right: none;
	}

	/* 滚动区域 */
	.sidebar-scroll {
		width: 100%;
		height: 100%;
	}

	/* 侧边栏选项 */
	.sidebar-item {
		padding: 30rpx 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1px solid #f5f5f5;
		box-sizing: border-box;
	}

	/* 选中状态 */
	.sidebar-item.active {
		background-color: #f0f7ff;
		color: #007aff;
		font-weight: bold;
		position: relative;
	}

	/* 选中项左侧指示器 */
	.sidebar-item.active::before {
		/* 		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 6rpx;
		background-color: #007aff; */
	}

	/* 空数据提示 */
	.empty-tip {
		text-align: center;
		font-size: 26rpx;
		color: #999;
		padding: 40rpx 0;
	}
</style>